<template>
    <!--面包屑-->
    <div style="margin-bottom: 30px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <router-link to="/PaymentShow">付费管理</router-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>付费显示</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <table style="width: 80%;">
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    标题:<el-input v-model="form.paymentTitle" style="width: 200px" clearable />
                </td>
                <td>
                    付款日期:<el-date-picker v-model="form.paymentDate" value-forma="YYYY-MM-DD" style="width: 200px" type="date" clearable />
                </td>
                <td>
                    审批状态:<el-select v-model="form.approvalStatus" style="width: 200px" clearable>
                        <el-option label="待提交" :value="1" />
                        <el-option label="待审批" :value="2" />
                        <el-option label="已通过" :value="3" />
                        <el-option label="已拒绝" :value="4" />
                    </el-select>
                </td>
            </tr>
            <tr>
                <td>
                    审批人:<el-input v-model="form.approver" style="width: 200px" clearable />
                </td>
                <td>

                </td>
                <td>
                    <!-- <div v-show="form.buttonArray.includes('getPaymentList')" class="table-operation"
                        style="margin-top: 8px;"> -->
                    <el-button type="primary" @click="getPaymentList()" :icon="Search">查询</el-button>
                    <!-- </div> -->

                    <!-- <div v-show="form.buttonArray.includes('reset')" class="table-operation" style="margin-top: 8px;"> -->
                    <el-button :icon="RefreshRight" @click="reset()">重置</el-button>
                    <!-- </div> -->
                </td>
            </tr>
        </tbody>
    </table>
    <!-- <div v-show="form.buttonArray.includes('addFeesExpenses')" class="table-operation" style="margin-top: 8px;"> -->
    <el-button type="primary" @click="addFeesExpenses()">新增</el-button>
    <!-- </div> -->

    <!-- <div v-show="form.buttonArray.includes('batchDel')" class="table-operation" style="margin-top: 8px;"> -->
    <el-button type="primary" @click="batchDel()">批量删除</el-button>
    <!-- </div> -->

    <el-table :data="paymentList" border style="width: 100%;text-align: center;margin-top: 10px"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="paymentTitle" label="标题" />
        <el-table-column prop="description" label="用途描述" />
        <el-table-column prop="paymentPrice" label="付款金额" />
        <el-table-column prop="billingMethod" label="付款方式" >
            <template v-slot="scope">
                <el-tag type="primary" v-if="scope.row.billingMethod == '微信支付'">微信支付</el-tag>
                <el-tag type="success" v-if="scope.row.billingMethod == '支付宝支付'">支付宝支付</el-tag>
                <el-tag type="info" v-if="scope.row.billingMethod == '银联支付'">银联支付</el-tag>
                <el-tag type="warning" v-if="scope.row.billingMethod == '企业转账'">企业转账</el-tag>
                <el-tag type="danger" v-if="scope.row.billingMethod == '线下支付'">线下支付</el-tag>
                <el-tag type="danger" v-if="scope.row.billingMethod == '其它'">{{ scope.row.otherBillingMethod }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="paymentMethods" label="支付对象" />
        <el-table-column prop="paymentBank" label="开户行" />
        <el-table-column prop="bankAccount" label="银行账户" />
        <el-table-column prop="paymentApplicant" label="申请人" />
        <el-table-column prop="paymentDate" label="付款日期">
            <template v-slot="scope">
                <span v-if="scope.row.paymentDate == null ? '' : scope.row.paymentDate">{{
                scope.row.paymentDate.substring(0, 10) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="paymentRemark" label="备注">
            <template v-slot="scope">
                {{ scope.row.paymentRemark ? scope.row.paymentRemark : '-' }}
            </template>
        </el-table-column>
        <el-table-column prop="createdDate" label="创建时间">
            <template v-slot="scope">
                <span v-if="scope.row.createdDate == null ? '' : scope.row.createdDate">{{
                scope.row.createdDate.substring(0, 16).replace("T", " ") }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="approvalStatus" label="审批状态">
            <template v-slot="scope">
                {{ scope.row.approvalStatus == 1 ? '待提交' : scope.row.approvalStatus == 2 ? '待审核' :
                scope.row.approvalStatus
                    == 3 ? '已通过' : '已拒绝' }}
            </template>
        </el-table-column>
        <el-table-column prop="approver" label="审批人">
            <template v-slot="scope">
                {{ scope.row.approver ? scope.row.approver : '-' }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="242">
            <template v-slot="scope">
                <!-- <div v-show="form.buttonArray.includes('jumpPaymentUpd')" class="table-operation"
                    style="margin-top: 8px;"> -->
                <el-button @click="jumpPaymentUpd(scope.row.paymentId)" v-if="scope.row.approvalStatus==1||scope.row.approvalStatus==4" type="primary" size="small" link
                    :icon="Edit">编辑</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('delPayment')" class="table-operation" style="margin-top: 8px;"> -->
                <el-button @click="delPayment(scope.row)" type="primary" size="small" link
                    :icon="CircleCloseFilled">删除</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('jumpPayment')" class="table-operation" style="margin-top: 8px;"> -->
                <el-button @click="jumpPayment(scope.row.paymentId)" type="primary" size="small" link
                    :icon="CircleCheckFilled">查看</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('jumpPaymentApproval')" class="table-operation"
                    style="margin-top: 8px;"> -->
                <el-button @click="jumpPaymentApproval(scope.row.paymentId, 2)" v-if="scope.row.approvalStatus == 1"
                    type="primary" size="small" link :icon="CircleCheckFilled">提交审批</el-button>
                <!-- </div> -->

                <!-- <div v-show="form.buttonArray.includes('jumpPaymentApproval')" class="table-operation"
                    style="margin-top: 8px;"> -->
                <el-button @click="jumpPaymentApproval(scope.row.paymentId, 2)" v-if="scope.row.approvalStatus == 4"
                    type="primary" size="small" link :icon="CircleCheckFilled">重新提交</el-button>
                <!-- </div> -->
            </template>
        </el-table-column>
    </el-table>

    <table style="float: right;">
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
                        layout="total, slot, prev, pager, next" :total="form.totalCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        <span>,每页{{ form.pageSize }}条,共{{ form.pageIndex }}/{{ form.totalPage }}页</span>
                        <el-button class="btn-prev" :disabled="form.pageIndex == 1"
                            @click="handleCurrentChange(1)">首页</el-button>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
                        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
                        layout="slot, sizes,jumper" :total="form.totalCount" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                        <el-button class="btn-prev" :disabled="form.pageIndex == form.totalPage"
                            @click="handleCurrentChange(form.totalPage)">尾页</el-button>
                    </el-pagination>
                </td>
            </tr>
        </tbody>
    </table>


    <el-dialog v-model="dialogFormVisible" title="付款详情" width="700">
        <table border
            style="border-collapse: collapse; margin-left: 10%;width: 500px;height: 500px;text-align: center;">
            <thead></thead>
            <tbody>
                <tr>
                    <td>标题:</td>
                    <td>
                        {{ form1.paymentTitle }}
                    </td>
                </tr>
                <tr>
                    <td>用途描述:</td>
                    <td>
                        {{ form1.description }}
                    </td>
                </tr>
                <tr>
                    <td>付款金额:</td>
                    <td>
                        {{ form1.paymentPrice }}
                    </td>
                </tr>
                <tr>
                    <td>付款方式:</td>
                    <td>
                        {{ form1.billingMethod }}
                    </td>
                </tr>
                <tr>
                    <td>支付对象:</td>
                    <td>
                        {{ form1.paymentMethods }}
                    </td>
                </tr>
                <tr>
                    <td>开户行:</td>
                    <td>
                        {{ form1.paymentBank }}
                    </td>
                </tr>
                <tr>
                    <td>银行账户:</td>
                    <td>
                        {{ form1.bankAccount }}
                    </td>
                </tr>
                <tr>
                    <td>申请人:</td>
                    <td>
                        {{ form1.paymentApplicant }}
                    </td>
                </tr>
                <tr>
                    <td>付款日期:</td>
                    <td>
                        {{ form1.paymentDate.substring(0, 10) }}
                    </td>
                </tr>
                <tr>
                    <td>审批状态:</td>
                    <td>
                        {{
                form1.approvalStatus == 1 ? "待提交" : form1.approvalStatus == 2 ? "待审核" : form1.approvalStatus ==
                    3 ?
                    "已通过" : "已拒绝"
                        }}
                    </td>
                </tr>
                <tr>
                    <td>审批人:</td>
                    <td>
                        {{ form1.approver }}
                    </td>
                </tr>
            </tbody>
        </table>
    </el-dialog>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Edit, CircleCheckFilled, CircleCloseFilled, RefreshRight } from '@element-plus/icons-vue'
const router = useRouter()
const route = useRoute()
const form = reactive({
    paymentTitle: '',
    paymentDate: '',
    approvalStatus: '',
    approver: '',
    companyID: '',
    pageIndex: 1,
    pageSize: 3,
    totalCount: 0,
    totalPage: 0,
    buttonArray: ['jumpPaymentUpd', 'getPaymentList', 'reset', 'addFeesExpenses', 'batchDel', 'delPayment', 'jumpPayment', 'jumpPaymentApproval']
})

//根据菜单id查询按钮功能权限
const getRoleMenuFun = () => {
    axios.get('http://47.96.109.219:5202/api/RoleMenuFun/RoleMenuFunId', {
        params: {
            menuId: route.query.id
        }
    }).then(res => {
        // console.log(res);
        form.buttonArray = res.data.data
    }).catch(err => {
        console.log(err);

    })
}

const form1 = reactive({
    createdBy: "张三",  // 创建人   
    createdDate: new Date(),    // 创建日期
    updatedBy: "张三",  // 更新人
    updatedDate: new Date(),     // 更新日期
    // deletedBy: "",  // 删除人
    // deletedDate: "",    // 删除日期
    isDeleted: false,        // 是否删除
    paymentId: 0,
    companyID: "",
    user_Id: 0,
    paymentTitle: "",
    description: "",
    paymentPrice: 0,
    billingMethod: "",
    otherBillingMethod: "",
    paymentMethods: "",
    paymentBank: "",
    bankAccount: "",
    paymentApplicant: "张三",
    paymentDate: "",
    paymentRemark: "",
    ticketAttachments: "",
    approvalStatus: 0,
    approver: ""
})

//显示应付费   
const paymentList = ref([])
const getPaymentList = () => {
    axios.get("/jread/api/Payment/Show", {
        params: {
            PaymentTitle: form.paymentTitle,
            PaymentDate: form.paymentDate,
            ApprovalStatus: form.approvalStatus || 0,
            Approver: form.approver,
            CompanyID: form.companyID,
            PageIndex: form.pageIndex,
            PageSize: form.pageSize,
        }
    })
        .then((res) => {
            paymentList.value = res.data.data.list
            form.totalCount = res.data.data.totalCount
            form.totalPage = res.data.data.totalPage
        })
        .catch((err) => {
            console.log(err)
        })
}

//分页
const handleSizeChange = (val: number) => {
    form.pageSize = val
    getPaymentList()
}
const handleCurrentChange = (val: number) => {
    form.pageIndex = val
    getPaymentList()
}

//删除
const delPayment = (row: any) => {
    ElMessageBox.confirm(
        '确认要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post("/swrite/api/Payment/Delete", row)
                .then((res) => {
                    if (res.data.code == 0) {
                        ElMessage.success("删除成功");
                        getPaymentList();
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消该操作',
            })
        })
}

//批删选中
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    console.log(multipleSelection.value)
}
//批删
const batchDel = () => {
    ElMessageBox.confirm(
        '确认要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            var ids: any = [];
            multipleSelection.value.forEach((item: any) => {
                ids.push(item.paymentId)
                console.log(ids)
            })
            axios.post("/swrite/api/Payment/BatchDel?PaymentId=" + ids)
                .then((res) => {
                    if (res.data.code == 0) {
                        ElMessage.success("删除成功");
                        getPaymentList();
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消该操作',
            })
        })
}

//跳转修改页面
const jumpPaymentUpd = (paymentId: any) => {
    router.push({
        name: '/PaymentUpdate',
        query: {
            paymentId: paymentId
        }
    })
}

const dialogFormVisible = ref(false);
//打开查看弹窗
const jumpPayment = (paymentId: any) => {
    dialogFormVisible.value = true;
    getPaymentModel(paymentId);
}
//返填
const getPaymentModel = (paymentId: any) => {
    axios.get("/jread/api/Payment/Backfill?PaymentId=" + paymentId)
        .then(res => {
            form1.createdBy = res.data.data.createdBy;
            form1.createdDate = res.data.data.createdDate;
            form1.updatedBy = res.data.data.updatedBy;
            form1.updatedDate = res.data.data.updatedDate;
            // form1.deletedBy= res.data.data.deletedBy;
            // form1.deletedDate= res.data.data.deletedDate;
            form1.isDeleted = res.data.data.isDeleted;
            form1.paymentId = res.data.data.paymentId;
            form1.companyID = res.data.data.companyID;
            form1.user_Id = res.data.data.user_Id;
            form1.paymentTitle = res.data.data.paymentTitle;
            form1.description = res.data.data.description;
            form1.paymentPrice = res.data.data.paymentPrice;
            form1.billingMethod = res.data.data.billingMethod;
            form1.otherBillingMethod= res.data.data.otherBillingMethod;
            form1.paymentMethods = res.data.data.paymentMethods;
            form1.paymentBank = res.data.data.paymentBank;
            form1.bankAccount = res.data.data.bankAccount;
            form1.paymentApplicant = res.data.data.paymentApplicant;
            form1.paymentDate = res.data.data.paymentDate;
            form1.paymentRemark = res.data.data.paymentRemark;
            form1.ticketAttachments = res.data.data.ticketAttachments;
            form1.approvalStatus = res.data.data.approvalStatus;
            form1.approver = res.data.data.approver;
        })
        .catch(err => {
            console.log(err);
        })
}



//重置查询条件
const reset = () => {
    form.paymentTitle = "";
    form.paymentDate = "";
    form.approvalStatus = "";
    form.approver = "";
    getPaymentList()
}

//跳转审批付款页面
const jumpPaymentApproval = (paymentId: any, approvalStatus: any) => {
    axios.post('/swrite/api/Payment/UpdStatus?PaymentId='+paymentId+'&ApprovalStatus='+approvalStatus)
        .then(res => {
            if (res.data.code == 0) {
                ElMessage.success("提交成功");
                getPaymentList();
            }
        })
        .catch(err => {
            console.log(err);
        })
}

//跳转新增收费页面
const addFeesExpenses = () => {
    router.push("PaymentAdd")
}

onMounted(() => {
    getPaymentList();
    getRoleMenuFun();
})
</script>